<template>
  <div class="playermiddle">
    <swiper :options="swiperOptions" class="banner">
      <swiper-slide class="cd">
        <div class="cd-wraper" ref="isPlaying">
          <img :src="this.currentSong.picUrl" alt="">
        </div>
        <p>{{this.lyric[0]}}</p>
        <p>{{this.lyric[1]}}</p>
      </swiper-slide>
      <swiper-slide class="item" ref="lyricContail">
        <ScrollView ref="scrollView">
          <ul>
            <li v-for="(value, index) in this.currentLyric" :key='index' :class="{'active' : currentLineNum === index}">{{value}}</li>
          </ul>
        </ScrollView>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import ScrollView from '../iscroll.vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { mapGetters } from 'vuex'
export default {
  name: 'PlayerMiddle',
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          bulletClass: 'my-bullet',
          bulletActiveClass: 'my-bullet-active'
        },
        observer: true,
        observeParents: true,
        observeSlideChildren: true
      },
      lyric: [],
      currentLineNum: ''
    }
  },
  props: {
    currentTime: {
      type: Number,
      default: 0,
      required: true
    }
  },
  computed: {
    ...mapGetters([
      'isPlaying',
      'currentSong',
      'currentLyric'
    ])
  },
  components: {
    swiper,
    swiperSlide,
    ScrollView
  },
  methods: {
    getMusicLyric () {
      let count = 2
      for (const key in this.currentLyric) {
        if (count === 0) {
          return this.lyric
        }
        this.lyric.push(this.currentLyric[key])
        count--
      }
    },
    // 找到高亮歌词的key
    getActiveLineNum (lineNum) {
      const result = this.currentLyric[lineNum + '']
      if (result === undefined || result === '') {
        lineNum = lineNum - 1
        return this.getActiveLineNum(lineNum)
      } else {
        return lineNum + ''
      }
    }
  },
  watch: {
    isPlaying (newValue, oldValue) {
      if (newValue) {
        this.$refs.isPlaying.classList.add('active')
      } else {
        this.$refs.isPlaying.classList.remove('active')
      }
    },
    currentLyric (newValue, oldValue) {
      this.lyric = []
      this.getMusicLyric()
    },
    currentTime (newValue, oldValue) {
      // 歌词自动回到顶部
      if (newValue <= 3) {
        this.$refs.scrollView.scrollTo(0, 0, 100)
      }
      // 歌词高亮同步
      let val = Math.floor(newValue)
      val = this.getActiveLineNum(val)
      this.currentLineNum = val
      // 歌词滚动
      const lyricHeight = this.$refs.lyricContail.$el.offsetHeight
      const currentLyricTop = document.querySelector('.item .active') != null ? document.querySelector('.item .active').offsetTop : null
      if (currentLyricTop > lyricHeight / 2 && (lyricHeight / 2 - currentLyricTop) >= this.$refs.scrollView.maxScrollY()) {
        this.$refs.scrollView.scrollTo(0, lyricHeight / 2 - currentLyricTop, 100)
      } else if (currentLyricTop < lyricHeight / 2) {
        this.$refs.scrollView.scrollTo(0, 0, 100)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
  @import '../../assets/css/variable.scss';
  @import '../../assets/css/mixin.scss';
  .playermiddle{
    .banner{
      position: fixed;
      top: 100px;
      bottom: 300px;
      left: 0;
      right: 0;
      .cd{
        .cd-wraper{
          display: block;
          margin: 0 auto;
          width: 500px;
          height: 500px;
          border-radius: 50%;
          border: 20px solid #fff;
          overflow: hidden;
          animation: sport 4s linear infinite;
          animation-play-state: paused;
          &.active{
            animation-play-state: running;
          }
          img{
            width: 100%;
            height: 100%;
          }
        }
        p{
          text-align: center;
          margin-top: 20px;
        }
      }
      .item{
        ul{
          position: relative;
          z-index: 1000;
          @include font_size($font_medium_s);
          padding-top: 100px;
          padding-bottom: 400px;
          li{
            text-align: center;
            &.active{
              color: rgb($color: #fd5b5b, $alpha: 1.0);
            }
          }
        }
      }
    }
  }
  .swiper-pagination{
    display: flex;
    justify-content: center;
  }
  @keyframes sport{
    from{
      transform: rotate(0deg);
    }
    to{
      transform: rotate(360deg)
    }
  }
</style>
<style lang='scss'>
  @import '../../assets/css/mixin.scss';
  .my-bullet{
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    margin: 0 5px;
  }
  .my-bullet-active{
    @include bg_color();
    width: 40px;
    height: 16px;
    border-radius: 8px;
  }
</style>
